/*
 * @Author: mikey.zhaopeng 
 * @Date: 2019-01-07 21:03:34 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-01-13 17:22:58
 * @通讯录列表
 */
<template>
    <div class="cell-wrapper" @click="$emit('click')">
        <div class="cell-title">
            <img :src="user.avatar" />
            <span v-show="count" class="badge">{{count}}</span>
            <span>{{user.name}}</span>
        </div>
    </div>
    
</template>
<script>
export default {
    name:'info-cell',
    props:{
        user:Object,
        count:Number
        },
        data(){
            return{
                
            }
        }
}
</script>
<style scoped>
.cell-wrapper{
    background-color: #fff;
    color: inherit;
    min-height: 50px;
    display: flex;
    font-size: 16px;
    overflow: hidden;
    padding: 0 8px;
    width: 100%;
    line-height: 50px;
    border-bottom: 1px solid #d9d9d9;
}
.cell-title{
    flex: 1;
}
.cell-title img{
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: middle;
    margin-right: 0.6rem;
}
.cell-title span{
    display: inline-block;
    vertical-align: middle;
}
.badge{
    background-color: #ff0a0a;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
    position: absolute;
    left: 2rem;
}
</style>




